<template>
  <div>
    <!--楼层切换模块-->
    <div
      class="changeFBox"
      :class="isShowNowFloor?'':'openChangeFBox'"
      :style="changeFloorToggleBotttom"
    >
      <div class="fBoxT">
        <span></span>
      </div>
      <div class="changeF swiper-container swiper-container1">
        <ul class="swiper-wrapper swiper-wrapper1">
          <li
            :name="item.FloorID"
            class="swiper-slide swiper-slide1"
            v-for="(item,index) in floorData"
            :key="item.Order"
          >
            <button
              type="button"
              class="btn btn-default"
              :data-data="item.FloorID"
              :data-value="item.Name"
            >{{item.Name}}</button>
          </li>
        </ul>
      </div>
      <div class="fBoxB">
        <span></span>
      </div>
    </div>

    <!-- 展示当前所在楼层模块 -->
    <div
      class="floorToggle"
      @click="openFloorToogle"
      v-if="isShowNowFloor"
      :style="changeFloorToggleBotttom"
    >{{$store.state.nowFloor}}</div>
  </div>
</template>

<script>
// 引入swiper
import Swiper from "swiper";
export default {
  props: {
    floorData: Array,
    initFloorID: String
  },
  data() {
    return {
      // 是否显示当前楼层
      isShowNowFloor: true,
      // 楼层切换swiper模块对象
      floorSwiper: null
    };
  },
  computed: {
    getNowFloorChange() {
      return this.$store.state.nowFloor;
    },
    changeFloorToggleBotttom() {
      if (this.$store.state.isBigScreen) {
        if (
          this.$store.state.isShowSetPoint ||
          this.$store.state.isShowGuidedSearchPathPart ||
          this.$store.state.isShowShareMap
        ) {
          return {
            bottom: "187px"
          };
        } else {
          return {
            bottom: "50px"
          };
        }
      } else {
        if (
          this.$store.state.isShowSetPoint ||
          this.$store.state.isShowGuidedSearchPathPart ||
          this.$store.state.isShowShareMap
        ) {
          return {
            bottom: "145px"
          };
        } else {
          return {
            bottom: "8px"
          };
        }
      }
    }
  },
  watch: {
    // 监听当前楼层的切换
    getNowFloorChange(newVal, oldVal) {
      this.floorDetection(this.$store.state.mapConfig.allNameOrder[newVal]);
    }
  },
  created() {},
  mounted() {
    this.floorSwiper = this.mySwiper(this.floorData);
    this.floorDetection(
      this.$store.state.mapConfig.floorsOrder[this.initFloorID]
    );
  },
  methods: {
    // 展开楼层切换模块
    openFloorToogle() {
      this.isShowNowFloor = false;
    },
    //楼层模块滑动切换方法
    mySwiper(floorData) {
      const self = this;
      return new Swiper(".swiper-container1", {
        on: {
          tap: function() {
            self.$store.commit(
              "updateNowFloor",
              self.$store.state.mapConfig.allFloorName[
                self.$store.state.mapConfig.orderFloors[
                  self.floorSwiper.activeIndex + 1
                ]
              ]
            );

            self.$store.commit("updateIsShowAreaInfo", false);

            self.$store.commit("updateIsShowShareMap", false);

            // 切换楼层的时候如果选择了起点终点  此时隐藏设置起点终点部分 显示模拟导航提示部分
            self.$store.commit("updateIsShowSetPoint", false);

            if (self.$store.state.isShowOperation) {
              self.$store.commit("updateIsShowGuidedSearchPathPart", true);
            }

            map.showFloors([
              self.$store.state.mapConfig.orderFloors[
                self.floorSwiper.activeIndex + 1
              ]
            ]);

            // 地图初始化
            self.$parent.mapResetPublic();
            // 重新显示当前楼层提示
            self.isShowNowFloor = true;
          },
          click: function() {
            self.floorSwiper.slideToclickedSlide = false;
          },
          init: function() {
            console.log("mySwiper was init");
          }
        },
        init: true,
        direction: "vertical",
        slidesPerView: "auto",
        slideToClickedSlide: true,
        centeredSlides: true,
        freeMode: true,
        preventClicks: false,
        preventLinksPropagation: false, //阻止滑动点击
        preventclicksPropagation: false,
        touchRatio: 1.5, //触摸变慢
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true //将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新
      });
    },
    // 判断当前楼层
    floorDetection(index) {
      setTimeout(() => {
        this.floorSwiper.slideTo(index - 1);
      }, 200);
    }
  },
  components: {}
};
</script>

<style lang='less'>
// 楼层切换模块
.changeFBox {
  width: 40px;
  height: 0;
  position: fixed !important;
  bottom: 20px;
  left: 12px;
  border: none;
  border-radius: 3px;
  background-color: #ffffff;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  /* Firefox 4 */
  -webkit-transition: all 0.5s;
  /* Safari 和 Chrome */
  -o-transition: all 0.5s;
  /* Opera */
}

.openChangeFBox {
  height: 182px;
}

.swiper-container1 {
  width: 100%;
  height: 160px;
}

.fBoxT,
.fBoxB {
  width: 100%;
  height: 11px;
  align-items: center;
  display: -webkit-flex;
  justify-content: center;
  display: -webkit-flex;
}

.fBoxT span {
  width: 5.2px;
  height: 5.2px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 5.2px;
  background-image: url("../assets/images/icon_jiantoushanglv.png");
}

.fBoxB span {
  width: 5.2px;
  height: 5.2px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 5.2px;
  background-image: url("../assets/images/icon_jiantoushanglvd.png");
}

.swiper-wrapper1 {
  width: 100%;
  height: 100%;
  border: none;
}

.swiper-slide1 {
  width: 100% !important;
  height: 40px !important;
  line-height: 40px;
  font-size: 12px;
  opacity: 0.3;
  border: none;
}

.swiper-slide-prev,
.swiper-slide-next {
  opacity: 0.5;
}

.changeF button {
  width: 100%;
  height: 100%;
  border: none;
  color: #676767;
  font-size: 12px;
  background-color: #ffffff;
}

.swiper-slide1.swiper-slide-active button {
  border: solid 3px #fa7d34;
  border-radius: 3px;
}

.swiper-slide1.swiper-slide-active button::before,
.swiper-slide1.swiper-slide-active button::after {
  content: "";
  display: block;
  width: 4px;
  height: 100%;
}

.swiper-slide1.swiper-slide-active button::before {
  position: absolute;
  top: 0;
  left: 0;
}

.swiper-slide1.swiper-slide-active button::after {
  position: absolute;
  top: 0;
  right: 0;
}

.swiper-slide1.swiper-slide-active {
  opacity: 1;
  width: 100% !important;
}

.swiper-slide-active button {
  color: #a6937c;
}

button:focus {
  outline: none;
}

/* 展示当前所在楼层模块 */
.floorToggle {
  width: 45px;
  height: 45px;
  font-size: 12px;
  color: #fa7d34;
  position: fixed;
  bottom: 18px;
  left: 8px;
  align-items: center;
  display: -webkit-flex;
  justify-content: center;
  display: -webkit-flex;
  background-image: url("../assets/images/icon_loucengkuang.png");
  background-size: contain;
  border-radius: 3px;
  transition: bottom 0.5s;
  /* Firefox 4 */
  -moz-transition: bottom 0.5s;
  /* Safari 和 Chrome */
  -webkit-transition: bottom 0.5s;
  /* Opera */
  -o-transition: bottom 0.5s;
}
</style>
